<template>
  <el-dialog
    title="销售单信息"
    :visible.sync="centerDialogVisible"
    width="80%"
    center
    @open="init"
    append-to-body
  >
    <div class="page_main">
      <div class="header">
        <div class="fill_date" v-loading="formLoading">填表日期：{{ cuForm.fill_date|formatDate }}</div>
      </div>
      <div class="content">
        <el-form ref="cuForm" v-loading="formLoading" :model="cuForm" :rules="rules" :disabled="true">
          <table class="mailTable">
            <tr class="firstTr">
              <td class="firstTd column tip_td">
                <span class="tip">*</span>公司
              </td>
              <td colspan="3" class="column">
                <el-form-item prop="dept_id">
                  <el-select v-model="cuForm.dept_id" style="width: 100%" placeholder="请选择公司">
                    <el-option v-for="item in companyArr" :label="item.head" :value="item.id" :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="firstTd column tip_td">
                <span class="tip">*</span>项目
              </td>
              <td class="column">
                <el-form-item prop="customer_id">
                  <el-select v-model="cuForm.customer_id" style="width: 100%" placeholder="请选择项目"
                  >
                    <el-option v-for="item in customerArr" :label="item.name" :value="item.id" :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </td>
              <td class="firstTd column tip_td">
                <span class="tip">*</span>合同
              </td>
              <td class="column">
                <el-form-item prop="contract_id">
                  <el-select v-model="cuForm.contract_id" style="width: 100%" placeholder="请选择合同"
                  >
                    <el-option v-for="item in contractArr" :label="item.part_a+'——'+item.contract_num" :value="item.id"
                               :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="firstTd column tip_td">
                <span class="tip">*</span>关联销售单
              </td>
              <td colspan="3" class="column">
                <el-form-item prop="bill_sale_id">
                  <el-select v-model="cuForm.bill_sale_id" style="width: 100%"
                             placeholder="请选择销售单" @change="billSelectChange"
                  >
                    <el-option v-for="item in billSaleArr" :key="item.id" :value="item.id"
                               :label="item.contract_num+'——'+item.actual_execute_time_start+'~'+item.actual_execute_time_end"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="firstTd column tip_td">
                <span class="tip">*</span>点位详情
              </td>
              <td colspan="3" class="column">
                <div style="margin-bottom: 20px">
                  <el-form>
                    <point-config :data="configData" :read-only="true" :tip-show="false"></point-config>
                  </el-form>
                </div>
              </td>
            </tr>
            <tr>
              <td class="firstTd column tip_td">
                <span class="tip">*</span>最晚上刊时间
              </td>
              <td class="column">
                <el-form-item prop="latest_up_date" class="el-form-item_inline-block">
                  <el-date-picker
                    v-model="cuForm.latest_up_date"
                    type="date"
                    style="width: 180px"
                    format="yyyy年MM月dd日"
                    value-format="yyyy-MM-dd"
                    placeholder="最晚上刊时间"
                  />
                </el-form-item>
                <el-form-item prop="latest_up_time" class="el-form-item_inline-block">
                  <el-select style="width: 150px" v-model="cuForm.latest_up_time" placeholder="请选择上下午" clearable>
                    <el-option label="上午" :value="1"/>
                    <el-option label="下午" :value="2"/>
                  </el-select>
                </el-form-item>
              </td>
              <td class="column tip_td">
                <span class="tip">*</span>最晚下刊时间
              </td>
              <td class="column">
                <el-form-item prop="latest_down_date" class="el-form-item_inline-block">
                  <el-date-picker
                    v-model="cuForm.latest_down_date"
                    type="date"
                    style="width: 180px"
                    format="yyyy年MM月dd日"
                    value-format="yyyy-MM-dd"
                    placeholder="最晚下刊时间"
                  />
                </el-form-item>
                <el-form-item prop="latest_down_time" class="el-form-item_inline-block">
                  <el-select style="width: 150px" v-model="cuForm.latest_down_time" placeholder="请选择上下午" clearable>
                    <el-option label="上午" :value="1"/>
                    <el-option label="下午" :value="2"/>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="firstTd column tip_td">
                <span class="tip">*</span>是否第一次上画
              </td>
              <td class="column">
                <el-form-item prop="first_time">
                  <el-radio-group v-model="cuForm.first_time">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
              <td class="column tip_td">
                <span class="tip">*</span>是否有新画面
              </td>
              <td class="column">
                <el-form-item prop="has_new_pic">
                  <el-radio-group v-model="cuForm.has_new_pic">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="firstTd column tip_td">
                <span class="tip">*</span>画面是否回收
              </td>
              <td class="column">
                <el-form-item prop="pic_need_recycle">
                  <el-radio-group v-model="cuForm.pic_need_recycle">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
              <td class="column tip_td">
                <span class="tip">*</span>是否显示代理资源标识
              </td>
              <td class="column">
                <el-form-item prop="show_proxy_flag">
                  <el-radio-group v-model="cuForm.show_proxy_flag">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="firstTd column tip_td">
                <span class="tip">*</span>是否需要小样
              </td>
              <td colspan="3" class="column">
                <el-form-item prop="need_sample">
                  <el-radio-group v-model="cuForm.need_sample">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="firstTd column tip_td">
                <span class="tip">*</span>设计人员
              </td>
              <td colspan="3" class="column">
                <el-form-item prop="design_user_id">
                  <el-select v-model="cuForm.design_user_id" style="width: 100%" placeholder="请选择设计人员" clearable
                             filterable
                  >
                    <el-option v-for="user in userArr" :value="user.id" :label="user.name" :key="user.id"></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="firstTd colum tip_td">
                <span class="tip">*</span>拍照要求
              </td>
              <td colspan="3" class="column">
                <div style="clear: both">
                </div>
                <div>
                  <table class="photoRequirementTable" style="width: 100%;margin-bottom: 10px">
                    <tr class="firstTr table-herder">
                      <td class="firstTd column" style="width: 15%">媒体类型</td>
                      <td class="column" style="width: 5%">动作</td>
                      <td class="column" style="width: 5%">照片</td>
                      <td class="column" style="width: 5%">近景</td>
                      <td class="column" style="width: 5%">远景</td>
                      <td class="column" style="width: 10%">时间</td>
                      <td class="column" style="width: 20%">具体要求</td>
                      <td class="column" style="width: 25%">备注</td>
                    </tr>
                    <template v-if="photoRequirementsDataArr.length>0"
                              v-for="(item,index) in photoRequirementsDataArr"
                    >
                      <template v-for="(tmp,i) in item.arr">
                        <tr v-for="(temp,j) in tmp.arr" :key="index+'_'+i+'_'+j">
                          <td v-if="i===0 && j===0" class="firstTd column" :rowspan="getRowSpan(item)">
                            <el-select v-model="item.media_type_id" clearable>
                              <el-option v-for="media in mediaSettingType" :key="media" :label="getPointTypeName(media)"
                                         :disabled="getOptionDisable(media,index)"
                                         :value="media"
                              ></el-option>
                            </el-select>
                          </td>
                          <td v-if="j===0" class="column" :rowspan="tmp.arr.length">
                            {{ temp.shoot_type === 1 ? '上刊' : temp.shoot_type === 2 ? '下刊' : '中间监播' }}
                          </td>
                          <td v-if="j===0" class="column" :rowspan="tmp.arr.length">
                            {{ getAllCount(tmp.arr) }}
                          </td>
                          <td class="column">
                            {{ temp.close_shoot_num ? temp.close_shoot_num : 0 }}
                          </td>
                          <td class="column">
                            {{ temp.far_shoot_num ? temp.far_shoot_num : 0 }}
                          </td>
                          <td class="column">{{ temp.shoot_date }}</td>
                          <td class="column" style="font-size: 12px">
                            <div>
                              {{ temp.baidu_time ? '有百度时间' : '' }}
                              {{ temp.watermark_time ? '有水印时间' : '' }}
                              {{ temp.newspaper_time ? '有报纸时间' : '' }}
                            </div>
                            <div>
                              {{ temp.normal_shoot ? '正常拍摄' : '' }}
                              {{ temp.background_clear ? '背景清晰' : '' }}
                              {{ temp.newpaper_clear ? '报纸清晰' : '' }}
                            </div>
                          </td>
                          <td class="column" style="font-size: 12px;text-align: left">
                            {{ temp.memo }}
                          </td>
                        </tr>
                      </template>
                    </template>
                    <tr v-if="photoRequirementsDataArr.length===0">
                      <td class="firstTd column" colspan="9">暂无数据</td>
                    </tr>
                  </table>
                </div>
              </td>
            </tr>
            <tr>
              <td class="firstTd colum tip_td">
                备注
              </td>
              <td colspan="3" class="column" style="padding: 10px 20px">
                <el-input v-model="cuForm.memo" type="textarea" :rows="4"></el-input>
              </td>
            </tr>
          </table>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import FlowBtnRow from '@/components/FlowBtnRow'
import PointConfig from '@/components/PointPlanSetting/pointConfig'
import { formatDate, formatDateByFmt } from '@/utils/util'
import { actual_delete, begin, detail as marketDetail, pass, remove, return_back, save } from '@/api/merketOrder'
import { formatData } from '@/views/business/contract/util'
import { cloneDeep, parseInt } from 'lodash'
import { company_list_all, list_all } from '@/api/customer/customer'
import { get_company } from '@/api/system/department'
import { detail, list_for_market_by_contract_id } from '@/api/saleOrder'
import { list_media_types } from '@/api/building/building'
import { list_latest_for_market_by_customer_id } from '@/api/contract'
import { list_by_role_code } from '@/api/system/user'

export default {
  name: 'MarketOrderDialog',
  props: {
    marketOrderId: {
      type: Number,
      default: -1
    }
  },
  components: { FlowBtnRow, PointConfig },
  filters: {
    formatDate(time) {
      if (time) {
        return formatDateByFmt(time, 'yyyy年MM月dd日')
      }
    }
  },
  data() {
    return {
      cuForm: {
        fill_date: formatDate(new Date()),
        dept_id: null,
        customer_id: null,
        contract_id: null,
        bill_sale_id: null,
        need_sample: null,
        latest_up_date: null,
        latest_up_time: null,
        latest_down_date: null,
        latest_down_time: null,
        first_time: null,
        has_new_pic: null,
        show_proxy_flag: null,
        pic_need_recycle: null,
        design_user_id: null,
        memo: null,
        mediaType2RequireList: {},
        type: 1
      },
      configData: [],
      companyArr: [],
      customerArr: [],
      tmpData: [],
      tmpBillSaleIdArr: [],
      point_type_arr: [],
      centerDialogVisible: false,
      dialogEdit: false,
      photoRequirementsData: {
        shoot_type: null,
        shoot_date: null,
        baidu_time: null,
        watermark_time: null,
        newspaper_time: null,
        normal_shoot: null,
        background_clear: null,
        newpaper_clear: null,
        close_shoot_num: null,
        far_shoot_num: null,
        memo: null
      },
      tmpArr: [],
      tempArr: [],
      index: null,
      contractArr: [],
      billSaleArr: [],
      userArr: [],
      photoRequirementsDataArr: [],
      params: {},
      rules: {
        //  { required: true, message: '公司不能为空', trigger: 'blur' },
        dept_id: [
          { required: true, message: '请选择公司', trigger: 'change' }
        ],
        customer_id: [
          { required: true, message: '请选择项目', trigger: 'change' }
        ],
        contract_id: [
          { required: true, message: '请选择合同', trigger: 'change' }
        ],
        bill_sale_id: [
          { required: true, message: '请选择销售单', trigger: 'change' }
        ],
        need_sample: [
          { required: true, message: '请选择是否需要小样', trigger: 'change' }
        ],
        latest_up_date: [
          { required: true, message: '请选择最晚上刊日期', trigger: 'change' }
        ],
        latest_up_time: [
          { required: true, message: '请选择上下午', trigger: 'change' }
        ],
        latest_down_date: [
          { required: true, message: '请选择最晚下刊日期', trigger: 'change' }
        ],
        latest_down_time: [
          { required: true, message: '请选择上下午', trigger: 'change' }
        ],
        first_time: [
          { required: true, message: '请选择是否第一次上画', trigger: 'change' }
        ],
        has_new_pic: [
          { required: true, message: '请选择是否有新画面', trigger: 'change' }
        ],
        show_proxy_flag: [
          { required: true, message: '请选择是否显示代理资源标识', trigger: 'change' }
        ],
        pic_need_recycle: [
          { required: true, message: '请选择画面是否需要回收', trigger: 'change' }
        ],
        design_user_id: [
          { required: true, message: '请选择设计人员', trigger: 'change' }
        ]
      },
      formLoading: false,
      mustIncludeBillSaleId: null,
      mustIncludeContractId: null,
      photoRequirementsFormRules: {
        shoot_type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        shoot_date: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      },
      tmpTypeId: null
    }
  },
  computed: {
    mediaSettingType() {
      let arr = []
      arr.push(-1)
      if (this.configData.length > 0) {
        arr = arr.concat(this.configData[0].arr)
      }
      return arr
    }
  },
  created() {
    this.initCompanyArr()
    this.initPointType()
    this.initUserList()
  },
  methods: {
    initCustomerArr(flag = false) {
      if (flag) {
        list_all().then(res => {
          this.customerArr = res.data.map(item => {
            return {
              id: item.id,
              name: item.name
            }
          })
        })
      } else {
        company_list_all().then(res => {
          this.customerArr = res.data.map(item => {
            return {
              id: item.id,
              name: item.name
            }
          })
        })
      }
    },
    initCompanyArr() {
      get_company().then(res => {
        this.companyArr = res.data
      })
    },
    billSelectChange(val) {
      this.configData = []
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      detail({ id: val }).then(res => {
        loading.close()
        this.configData = formatData(res)
      }).catch(() => {
        loading.close()
      })
    },
    /**
     * 初始化点位类型数据
     */
    initPointType() {
      list_media_types().then(
        res => {
          this.point_type_arr = res.data
        }
      )
    },
    getPointTypeName(id) {
      const tmp = this.point_type_arr.find(item => item.id == id)
      if (tmp) {
        return tmp.name
      } else {
        return '全部'
      }
    },
    getAllCount(arr) {
      let count = 0
      arr.forEach(item => {
        if (!isNaN(parseInt(item.close_shoot_num))) {
          count += parseInt(item.close_shoot_num)
        }
        if (!isNaN(parseInt(item.far_shoot_num))) {
          count += parseInt(item.far_shoot_num)
        }
      })
      return count
    },
    customerChange(val, flag = false) {
      if (!flag) {
        this.cuForm.contract_id = null
        this.cuForm.bill_sale_id = null
      }
      list_latest_for_market_by_customer_id({
        customerId: val,
        mustIncludeContractId: this.mustIncludeContractId
      }).then(res => {
        this.contractArr = res.data
      })
    },
    contractChange(val, flag = false) {
      if (!flag) {
        this.cuForm.bill_sale_id = null
        this.configData = []
      }
      list_for_market_by_contract_id({
        contractId: val,
        mustIncludeBillSaleId: this.mustIncludeBillSaleId,
        type: this.cuForm.type
      }).then(res => {
        this.billSaleArr = res.data
      })
    },
    initUserList() {
      list_by_role_code({ code: 'Design' }).then(res => {
        this.userArr = res.data
      })
    },
    getOptionDisable(val, index) {
      if (val !== -1) {
        // 如果其他的拍照要求包含了此选项 则禁用此选项 或者其他的拍照要求包含的全部 禁用此选项
        let flag = false
        for (let i = 0; i < this.photoRequirementsDataArr.length; i++) {
          if (i !== index) {
            const obj = this.photoRequirementsDataArr[i]
            if (obj.media_type_id === val || obj.media_type_id === -1) {
              flag = true
            }
          }
        }
        return flag
      } else {
        for (let i = 0; i < this.photoRequirementsDataArr.length; i++) {
          if (i !== index) {
            const obj = this.photoRequirementsDataArr[i]
            if (obj.media_type_id !== null) {
              return true
            }
          }
        }
        return false
      }
    },
    //获取跨行数
    getRowSpan(item) {
      let count = 0
      item.arr.forEach(tmp => {
        count += tmp.arr.length
      })
      return count
    },
    init() {
      this.formLoading = true
      marketDetail({ id: this.marketOrderId }).then(res => {
        this.formLoading = false
        this.cuForm = res.data
        this.initCustomerArr()
        this.mustIncludeBillSaleId = this.cuForm.bill_sale_id
        this.mustIncludeContractId = this.cuForm.contract_id
        this.customerChange(this.cuForm.customer_id, true)
        this.contractChange(this.cuForm.contract_id, true)
        this.configData = formatData(res)
        for (let key in this.cuForm.mediaType2RequireList) {
          let data = {
            media_type_id: parseInt(key),
            arr: []
          }
          for (let i = 1; i < 4; i++) {
            let filter = this.cuForm.mediaType2RequireList[key].filter(item => item.shoot_type === i)
            if (filter && filter.length) {
              let tmp = {
                shoot_type: i,
                arr: cloneDeep(filter)
              }
              data.arr.push(tmp)
            }
          }
          this.photoRequirementsDataArr.push(data)
        }
        this.$set(this.cuForm, 'fill_date', this.cuForm.created_at)
      })
    },
    open() {
      this.centerDialogVisible = true
    }
  }
}
</script>

<style scoped>
.title {
  margin-top: 20px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}

.header {
  width: 98%;
  margin: 0 auto;
  position: relative;
  height: 25px;
}

.content {
  margin-top: 20px;
}

.fill_date {
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 25px;
}

.mailTable {
  width: 98%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.photoRequirementTable tr td {
  line-height: 20px;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
}

.tip {
  color: red;
  width: 200px;
}

.table-herder {
  background-color: #F5F7FA;
  font-weight: bold;
}

.tip_td {
  padding: 0 20px !important;
  background-color: #F5F7FA;
  font-weight: bold;
  width: 200px;
}

/deep/ .content .el-form-item {
  margin-bottom: 0;
}

/deep/ .el-form-item_inline-block {
  display: inline-block;
  margin: 0 1px 0 1px;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white;
  color: black;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
  color: black;
}

/deep/ .el-radio__input.is-disabled + span.el-radio__label {
  color: black;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #409EFF;
  background: #409EFF
}

/deep/ .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #FFF;
}
</style>
